<template>
    <div class="search-box">
        <div class="row">
            <div class="left">
                <el-icon>
                    <Search />
                </el-icon>
                <span>筛选搜索</span>
            </div>
            <div class="right">
                <el-button>重置</el-button>
                <el-button type="primary" @click="queryUserList">查询搜索</el-button>
            </div>
        </div>
        <div class="row">
            <span>账号/姓名:</span>
            <el-input v-model="queryParams.keyword" placeholder="请输入姓名、账号搜索"></el-input>
        </div>
    </div>
    <div class="add-area">
        <el-button type="primary" @click="showDialog = true" v-permission="'addUser'">添加</el-button>
    </div>
    <el-table :data="userList" border table-layout="auto" cell-class-name="align-c">
        <el-table-column label="编号" prop="id" />
        <el-table-column label="账号" prop="username" />
        <el-table-column label="姓名" prop="nickName" />
        <el-table-column label="邮箱" prop="email" />
        <el-table-column label="添加时间" prop="createTime">
            <template #default="{ row }">
                <span>{{ formateDate(row.createTime) }}</span>
            </template>
        </el-table-column>
        <el-table-column label="最后登录" prop="loginTime">
            <template #default="{ row }">
                <span>{{ formateDate(row.loginTime) }}</span>
            </template>
        </el-table-column>
        <el-table-column label="是否启用" prop="loginTime">
            <template #default="{ row }">
                <el-switch v-model="row.status" :active-value="1" :inactive-value="0" @change="switchStatus(row)" />
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="{ row }">
                <el-button text type="primary" @click="allocRoleHandle(row.id)"
                    v-permission="'allocRole'">分配角色</el-button>
                <el-button text type="primary" @click="editUser(row.id)" v-permission="'editUser'">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <ElConfigProvider :locale="zhCn">
        <div class="page">
            <el-pagination v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
                :page-sizes="[10, 20, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
                :total="total" @size-change="queryUserList" @current-change="queryUserList" />
        </div>
    </ElConfigProvider>

    <UserEidt :show="showDialog" @hide="closeDialog" :id="editId" />
    <AllocRole :show="showAllocRole" :id="allocId" @hide="hideAlloc" />
</template>
<script setup lang='ts'>
import { ref, reactive } from "vue";
import { userListApi, switchUserStatusApi } from "./api";
import { Search } from "@element-plus/icons-vue";
import { ElConfigProvider, ElMessage } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { formateDate } from "@/utils";
import UserEidt from "./editUser.vue";
import AllocRole from "./allocRole.vue"

const allocId = ref(0)
const showAllocRole = ref(false)
const allocRoleHandle = (id: number) => {
    showAllocRole.value = true
    allocId.value = id
}

const hideAlloc = () => {
    showAllocRole.value = false
    allocId.value = 0
}

const editId = ref(0)
const editUser = (id: number) => {
    editId.value = id
    showDialog.value = true;
}

const showDialog = ref(false);
const closeDialog = (isReload?: boolean) => {
    showDialog.value = false;
    editId.value = 0
    // isReload是否要刷新
    if (isReload) queryUserList();
};

const switchStatus = (row: IUserModel) => {
    switchUserStatusApi(row.id!, row.status)
        .then((res) => {
            if (res.code === 200) {
                ElMessage.success("修改成功");
            } else {
                // 万一修改失败呢？
                // 产品思维 -- 熟练工的要求
                // 也就是要求大家要有 在真实产品中 把多方面的情况都考虑到的能力
                row.status = row.status === 1 ? 0 : 1;
                // 开发者思维 -- 根据开发者的角度来想问题
            }
        })
        .catch(() => {
            row.status = row.status === 1 ? 0 : 1;
        });
};

const queryParams = reactive<IUserListParams>({
    keyword: "",
    pageNum: 1,
    pageSize: 10,
});

const userList = ref<IUserModel[]>([]);
const total = ref(0);

const queryUserList = () => {
    userListApi(queryParams).then((res) => {
        if (res.code === 200) {
            userList.value = res.data.list;
            total.value = res.data.total;
        }
    });
};
// 请求一开始的默认数据
queryUserList();
</script>
<style lang="less" scoped>
:deep(.align-c) {
    .cell {
        text-align: center !important;
    }
}

.search-box {
    box-shadow: 0 0 4px 2px #ccc;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;

    .row {
        padding: 20px 0;
        display: flex;

        &:first-child {
            justify-content: space-between;
        }

        &:last-child {
            width: 400px;

            span {
                width: 100px;
            }
        }
    }
}

.page {
    padding: 20px;
    display: flex;
    justify-content: flex-end;
}

.add-area {
    display: flex;
    justify-content: flex-end;
    padding: 20px;
    margin-bottom: 20px;
}
</style>